<ui:composition template="/WEB-INF/template_page.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:b="http://bootsfaces.net/ui">

	<ui:define name="title">
        MeteoCal - Register
    </ui:define>

	<ui:define name="content">
		<div class="col-md-6 col-sm-offset-3">
			<div class="page-header">
				<h1>Registration form</h1>
			</div>
		
		
			<h:form id="registrationform">
				<label for="firstName" class="sr-only">First Name</label>
				<b:inputText id="firstName" placeholder="First Name" value="#{registrationBean.user.firstName}" />

				<label for="lastName" class="sr-only">Last Name</label>
				<b:inputText id="lastName" value="#{registrationBean.user.lastName}" placeholder="Last Name" />

				<label for="gender" class="sr-only">Gender</label>
				<h:selectOneMenu value="#{registrationBean.user.gender}" id="gender" class="form-control">
					<f:selectItems value="#{enumValuesProvider.genders}" var="g" itemValue="#{g}" itemLabel="#{g.description}" />
				</h:selectOneMenu>
				
				<br/>

				<label for="email" class="sr-only">Email</label>
				<b:inputText id="email" value="#{registrationBean.user.emailAddress}" placeholder="Email address" />

				<label for="password" class="sr-only">Password</label>
				<b:inputSecret id="password" value="#{registrationBean.user.password}" feedback="true" match="pwd2" placeholder="Password"/>

				<label for="pwd2" class="sr-only">Confirm Password</label>
				<b:inputSecret id="pwd2" placeholder="Confirm password" />
				
            	<h:messages  style="color: red"/>
            	
            	<br/>
					
				<b:commandButton class="btn btn-lg btn-success" id="submit" value="Register" action="#{registrationBean.register()}" ajax="true" update="@all" />
			</h:form>
		</div>
	</ui:define>
</ui:composition>

